<template>
	<view class="content-baisc-layout" :class="{'vip_user':isLogin && userInfo.is_vip == 1}">
		<!-- #ifndef H5 -->
		<u-navbar title-bold :titleSize="34" title="个人中心" :is-back="false" :border-bottom="false" :background="{
			background:isLogin && userInfo.is_vip == 1?'url(https://resource.lanbaozixun.com/uploads/images/2024062022225906cc88066.png) no-repeat':'url(https://resource.lanbaozixun.com/uploads/images/20240619195237bd6773653.png) no-repeat',
			backgroundSize:'100%'
		}" title-color="#2F3033">
		</u-navbar>
		<!-- #endif -->
		<view class="content-area">
			<view class="header-area">
				<view class="u-padding-12">
					<!-- 用户信息 -->
					<view class="u-flex">
						<u-avatar show-sex
							:sex-icon="userInfo.is_vip == 1?'https://resource.lanbaozixun.com/uploads/images/2024062022225975a533214.png':''"
							:src="isLogin ? userInfo.avatar : '/static/images/my_portrait_empty.png'"
							@click="goLogin"></u-avatar>
						<view class=" u-flex-col u-row-left u-row-between u-padding-top-5 information-area"
							:class="userInfo.is_vip == 1?'u-padding-left-40':'u-padding-left-20'">
							<view class="u-flex">
								<view @click="goLogin" class="lg font-weight-500"
									:class="{'white':isLogin && userInfo.is_vip == 1}">
									{{isLogin?userInfo.nickname||'':'点击登录'}}</view>
								<image v-if="isLogin && userInfo.authentication_status == 1"
									src="https://resource.lanbaozixun.com/uploads/images/2024061920274107d332402.png"
									mode="widthFix" class="icon u-margin-left-10"></image>
								<u-tag class="u-margin-left-20" size="mini" @tap="goPage('/pages/user/authentication')"
									v-else-if="isLogin && userInfo.authentication_status == 0" text="完善信息"
									type="warning" mode="light" />
							</view>
							<view @click="goLogin" class="xs" :class="{'white':isLogin && userInfo.is_vip == 1}">
								{{isLogin?userInfo.mobile||'':'登录体验更多功能'}}</view>
						</view>
					</view>
					<!-- VIP区域 -->
					<view class="vip-area u-flex">
						<view class="u-flex-1">
							<image src="/static/images/user/vip.png" mode="widthFix" class="vip-icon" v-if="!isLogin || userInfo.is_vip == 0"></image>
							<image src="/static/images/user/vip-s.png" mode="widthFix" class="vip-icon" v-else></image>
							<view class="u-padding-top-15 nr">
								<text class="c-FFD5A8-34" v-if="!isLogin || userInfo.is_vip == 0">激活蓝豹SVIP最高可省</text>
								<text class="c-FFD5A8" v-if="!isLogin || userInfo.is_vip == 0">2000元</text>
								<text class="c-FFD5A8" v-else>会员有效期至 {{$u.timeFormat(userInfo.vip_time, 'yyyy年mm月dd日')}}</text>
							</view>
						</view>
						<view class="buy-btn" @click="goPage('/pages/user_vip/user_vip')" :class="{'white':!isLogin || userInfo.is_vip == 0}">
							{{!isLogin || userInfo.is_vip == 0?'成为会员':'续费'}}
						</view>
					</view>
					<!-- 钱包区域 -->
					<view class="u-flex u-row-between xs c-333333" :class="isLogin && userInfo.is_vip == 1?'u-margin-top-40':'u-margin-top-20'">
						<view class="">
							<p class="xs" :class="{'white':isLogin && userInfo.is_vip == 1}">可提现(元)</p>
							<view class="u-margin-top-30 u-flex u-col-bottom":class="{'c-FFB973':isLogin && userInfo.is_vip == 1}">
								<p class="nr">¥</p>
								<p class="font-size-64 din-font bold" v-text="userInfo.earnings||0"></p>
							</view>
						</view>
						<view class="u-text-right">
							<view class="u-flex" :class="{'white':isLogin && userInfo.is_vip == 1}"
								@tap="goPage('/pages/bundle/user_bill/user_bill?type=0')">
								<p>查看明细</p>
								<u-icon name="arrow-right" :color="!isLogin && userInfo.is_vip == 1?'#333333':'white'"
									size="24"></u-icon>
							</view>
							<view class="u-margin-top-30 withdraw-btn white"
								@click="goPage('/pages/bundle/user_withdraw/user_withdraw')">
								提现
							</view>
						</view>
					</view>
					<!-- 收入区域 -->
					<view class="u-margin-top-30 income-area u-flex u-padding-24 u-border-radius-20">
						<view class="u-flex-1 u-text-center u-border-right">
							<view class="xs">总收入(元)</view>
							<view class="md bold u-padding-top-15">{{userInfo.all_income||0}}</view>
						</view>
						<view class="u-flex-1 u-text-center">
							<view class="xs">今日收益(元)</view>
							<view class="md bold u-padding-top-15">{{userInfo.day_income||0}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="u-padding-left-28 u-padding-right-28">
				<uv-scroll-list :indicator="kongLists.length > 6?true:false" :indicatorColor="!isLogin && userInfo.is_vip == 1?'#DCE8F5':'#FFFFFF'" :indicatorActiveColor="!isLogin && userInfo.is_vip == 1?'#5CB8F7':'#EAC0AA'">
					<view class="u-margin-right-44 u-text-center u-margin-top-30" v-for="(item, index) in kongLists"
						:key="index" @tap="menuJump(item)">
						<u-avatar :src="item.image" :size="77"></u-avatar>
						<view class="u-padding-top-15 nowrap c-333333">{{item.name||''}}</view>
					</view>
				</uv-scroll-list>
			</view>
		</view>
		<view class="operation-area u-padding-bottom-30">
			<view class="performance-area bg-white u-padding-30 u-border-radius-20">
				<view class="nr u-padding-left-10 bold">
					今日业绩
				</view>
				<view class="u-flex u-margin-top-24">
					<view class="u-flex-1 u-flex u-flex-col u-row-center u-col-center">
						<p class="u-flex u-col-baseline">
							<span class="xxl bold" v-text="userInfo.userNowDayPromotion||0">0</span>
							<span class="xs u-padding-left-10">人</span>
						</p>
						<p class="nr u-padding-top-16">推广客户</p>
					</view>
					<view class="u-flex-1 u-flex u-flex-col u-row-center u-col-center">
						<p class="u-flex u-col-baseline">
							<span class="xxl bold" v-text="userInfo.teamNowDayPromotion||0">0</span>
							<span class="xs u-padding-left-10">人</span>
						</p>
						<p class="nr u-padding-top-16">团队客户</p>
					</view>
					<view class="u-flex-1 u-flex u-flex-col u-row-center u-col-center">
						<p class="u-flex u-col-baseline">
							<span class="xxl bold" v-text="userInfo.nowAddSonUser||0">0</span>
							<span class="xs u-padding-left-10">人</span>
						</p>
						<p class="nr u-padding-top-16">今日招募</p>
					</view>
				</view>
			</view>
			<view v-for="(v,k) in userMenuLists" :key="k"
				class="bg-white u-margin-top-30 u-padding-30 operation-area-item">
				<span class="nr title ">{{v.name||''}}</span>
				<view class="u-flex u-flex-wrap u-margin-top-15" v-if="v.son">
					<view v-for="(item,index) in v.son" :key="index" @tap="menuJump(item)"
						class="w-1-4 u-text-center u-margin-top-12 ">
						<image :src="item.image" mode="heightFix" class="operation-icon"></image>
						<view class="xs u-padding-top-12">{{item.name||''}}</view>
					</view>
				</view>
			</view>
		</view>
		<pop-advertising pid="5"></pop-advertising>
		<common-tabbar></common-tabbar>
		<xy-loading v-if="loadingShowStatus"></xy-loading>
	</view>
</template>
<script>
	import {
		getMenu,
		queryUserMenu
	} from '@/api/store'
	import {
		getUser
	} from '@/api/user';
	import {
		toLogin,
		wxMnpLogin
	} from '@/utils/login'
	import {
		menuJump,
		copy,
		setTabbar
	} from '@/utils/tools'
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				isShowMoney: true,
				kongLists: [],
				userMenuLists: [],
				loadingShowStatus: true
			};
		},
		onLoad(options) {
			setTabbar()
			this.getMenuFun();
			this.queryUserMenuFun();
			setInterval(() => {
				this.loadingShowStatus = false;
			}, 300)
		},

		onShow() {
			this.getUser();
		},
		onPageScroll(e) {
			const top = uni.upx2px(100)
			const {
				scrollTop
			} = e
			let percent = scrollTop / top > 1 ? 1 : scrollTop / top
			this.navBg = percent
		},

		onPullDownRefresh() {
			const _this = this;
			this.getUser().then(() => {
				uni.stopPullDownRefresh();
				_this.loadingShowStatus = false;
			})
		},
		onShareAppMessage() {
			const shareInfo = Cache.get('shareInfo')
			return {
				title: shareInfo.mnp_share_title,
				path: "pages/index/index?invite_code=" + this.inviteCode
			};
		},
		methods: {
			...mapActions(['getUser']),
			async getMenuFun() {
				const {
					code,
					data
				} = await getMenu({
					type: 2,
				});
				uni.stopPullDownRefresh();
				this.kongLists = data;
			},
			async queryUserMenuFun() {

				const {
					code,
					data
				} = await queryUserMenu();
				this.userMenuLists = data;
			},
			goLogin() {
				let {
					isLogin
				} = this;
				if (isLogin) {
					uni.navigateTo({
						url: '/pages/bundle/user_profile/user_profile'
					});
					return;
				}
				toLogin()
			},

			goPage(url) {
				if (!this.isLogin) return toLogin()
				uni.navigateTo({
					url,
					fail: (e) => {
						console.log(e)
					}

				});
			},
			onCopy(e) {
				copy(this.userInfo.sn)
			},
			msgHint() {
				this.$u.toast('功能开发中');
			},
			menuJump(item) {
				if (!this.isLogin) {
					uni.navigateTo({
						url: '/pages/login/login'
					});
					return;
				}
				if (item.link_type == 3) {
					this.$u.toast('功能待开放');
				}
				console.log(item)
				menuJump(item)
			},
			isIosUser() {
				//#ifndef  MP-WEIXIN
				return false;
				// #endif
				//#ifdef  MP-WEIXIN
				return true;
				// #endif
			}
		},
		computed: {
			...mapGetters(["userInfo", "inviteCode", "appConfig"]),
			background() {
				const {
					center_setting
				} = this.appConfig
				return center_setting.top_bg_image ? {
					'background-image': `url(${center_setting.top_bg_image})`
				} : {}
			},
		}
	};
</script>
<style lang="scss">
	@import './user.scss'
</style>